const BASE_URL="http://api-breakingnews-web.itheima.net"
function mg_load(){
  axios
  .get(`${BASE_URL}/my/article/cates`,{
    headers:{
      Authorization:localStorage.getItem("token"),
    },
  })
  .then(res=>{
    console.log("获取类别",res.data.data)
    $("tbody").empty()
    res.data.data.forEach(v => {
      let theTr=`<tr>
      <td>${v.name}</td>
      <td>${v.alias}</td>
      <td>
        <button myid="${v.Id}" data-name="${v.name}" data-alias="${v.alias}" type="button"
          class="layui-btn layui-btn-xs edit">编辑</button>

        <button myid="${v.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
      </td>
    </tr>`
  $('tbody').append(theTr)
    })
  })
}
mg_load()
//第二个功能 : 添加类别
$(".add").on("click",function(){
  let index=layer.open({
    type: 1,
    content: add_str, // 弹层里面显示内容
    title: '新增分类',
    area: ['500px', '300px'],
    // 和$.ajax的success效果一样
    success() {
      console.log('success-------------')
      $(".add-form").on("submit",function(e){
        e.preventDefault()
        let data=$("form").serialize()
        axios
        .post(`${BASE_URL}/my/article/addcates`,data,{
          headers:{
            Authorization:localStorage.getItem("token"),
          },
        })
        .then(res=>{
          console.log("添加之后的结果",res)
          mg_load()
          layer.msg("添加类别成功",{icon:1,time:2000})
          layer.close(index)
        })
      })
        
      
    },
  })
})
// 第三个功能 : 删除
$("tbody").on("click",".delete",function(){
  let id=$(this).attr("myid")
  layer.confirm("是否要删除？",function(index){
    axios
    .get(`${BASE_URL}/my/article/deletecate/${id}`,{
      headers:{
        Authorization:localStorage.getItem("token"),
      },
    })
    .then(function(){
      layer.msg("删除类别成功",{icon:1,time:2000})
      mg_load()
    })
    layer.close(index)
  })
})
// 第四个功能 : 编辑
$("tbody").on("click",".edit",function(){
  let id=$(this).attr("myid")
  let name=$(this).attr("data-name")
  let alias=$(this).attr("data-alias")
  let index=layui.layer.open({
    type: 1,
    content: edit_str,
    title: '编辑分类',
    area: ['500px', '300px'],
    // 显示成功就会走 success
    success(){
      console.log("successs-------")
      $("#edit_form input[name=name]").val(name)
      $("#edit_form input[name=alias]").val(alias)
      $("#edit_form").on("submit",function(e){
        e.preventDefault()
        let name=$("#edit_form input[name=name]").val()
        let alias=$("#edit_form input[name=alias]").val()
        console.log("这是最新的值",name,alias)
        let data=`name=${name}&alias=${alias}&Id=${id}`
        axios
        .post(`${BASE_URL}/my/article/updatecate`,data,{
          headers:{
            Authorization:localStorage.getItem("token"),
          },
        })
        .then(res=>{
          console.log("编辑的结果",res.data)
          if(res.data.status===0){
            layer.msg("更新成功",{icon:1})
            mg_load()
            layer.close(index)
          }
        })
      })
    }
  })
  
})
// 字符串1 : 添加类别的
let add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button  class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
</form>`

// 字符串2 : 编辑类别的
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`

